<template>
	<uni-nav-bar left-icon="left" right-icon="auth-filled" style="margin-top: 3vh;">
		<uni-search-bar placeholder="#烟花" bgColor="#EEEEEE" @confirm="searchFn();" style="width: 80vw;"/>
	</uni-nav-bar>
	<view class="container">
		<uni-card title="基础卡片" sub-title="副标题" extra="额外信息"
			thumbnail="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
			<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
		</uni-card>
		<uni-card cover="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
			<text>这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
			<template v-slot:actions>
				<view class="card-actions">
					<view class="card-actions-item" @click="">
						<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">分享</text>
					</view>
					<view class="card-actions-item" @click="navigateToNewPage">
						<uni-icons type="heart" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">点赞</text>
					</view>
					<view class="card-actions-item" @click="actionsClick('评论')">
						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">评论</text>
					</view>
				</view>
			</template>
		</uni-card>


	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			navigateToNewPage() {
				uni.navigateTo({
					url: '/pages/index/about'
				})
			},
			searchFn() {
				
			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>